<template>
  <div :id="chartid" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import { reactive, ref, watch, onMounted } from 'vue';
import * as echarts from "echarts";

// 接收组件传来的参数
const props = defineProps({
  chartid: {
    type: String
  },
  data: {
    type: Array,
    default: []
  },
  color: {
    type: Array
  }
});

//声明周期函数，自动执行初始化
onMounted(() => {
  setTimeout(() => {
    init(props.chartid, props.data, props.color);

  }, 100);
});



//初始化函数
function init (id, data, color) {
  var itemData = [];
  var min = Math.min.apply(null, data.map(function (item) {
    return item.value;
  }));
  min = Math.floor(min / 10);
  for (var i = 0; i < data.length; i++) {
    itemData.push({
      name: data[i].name,
      value: data[i].value,

    }, {
      name: '空',
      value: min,
      itemStyle: {
        color: 'transparent'
      },
      emphasis: {
        disabled: true,
      }
    })



  }

  let chartDom = document.getElementById(id)
  let chart = echarts.getInstanceByDom(chartDom)
  if (chart == null) {
    chart = echarts.init(chartDom);
  } else {
    chart.clear();
  }
  var options = {
    tooltip:{
        show:true
    },

    color: color ? color : '',
    series: [{
      type: 'pie',
      radius: ['38%', '58%'],
      center: ['50%', '50%'],
      data: itemData,
      z: 2,
      label: {
        show: false,
      }
      
    }]
  };
  // 渲染图表
  chart.setOption(options);
  window.addEventListener('resize', function () {
    chart.resize();
  }, false);
}
</script>